<template>
  <div class="content-box">
    <div ref="searchBox" class="search-box flex" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="上游渠道" prop="upProductIds">
          <el-select
            v-model="queryParams.upProductIds"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in upProductIdsOptionList"
              :key="index"
              :label="item.simpleName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下游产品" prop="downProductIds">
          <el-select
            v-model="queryParams.downProductIds"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in productOptionList"
              :key="index"
              :label="item.productName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属省份" prop="provinceCode">
         <el-select
          v-model="queryParams.provinceCode"
          clearable
          filterable
          placeholder="请选择"
          style="width: 240px; margin-right: 20px"
         >
           <el-option
            v-for="(item, index) in provinceCodeOption"
            :key="index"
            :label="item.name"
            :value="item.code"
            ></el-option>
         </el-select>
        </el-form-item>

        <el-form-item label="所属城市" prop="cityCode">
         <el-select
          v-model="queryParams.cityCode"
          clearable
          filterable
          placeholder="请选择"
          style="width: 240px; margin-right: 20px"
         >
           <el-option
            v-for="(item, index) in cityCodeOption"
            :key="index"
            :label="item.name"
            :value="item.code"
            ></el-option>
         </el-select>
        </el-form-item>
        <el-form-item label="采量模式" prop="pickType">
            <el-select
              v-model="queryParams.pickType"
              clearable
              filterable
              placeholder="请选择"
              style="width: 240px; margin-right: 20px"
            >
              <el-option
                v-for="(item, index) in pickTypeOption"
                :key="index"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="计费模式" prop="feeType">
          <el-select
            v-model="queryParams.feeType"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in feeTypeOption"
              :key="index"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否计费" prop="isFee">
          <el-select
            v-model="queryParams.isFee"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in isFeeOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="售出状态" prop="pushStatus">
          <el-select
            v-model="queryParams.pushStatus"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in pushStatusOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号MD5" prop="phoneMd5">
          <el-input
            style="width: 240px; margin-right: 20px"
            v-model="queryParams.phoneMd5"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            style="width: 240px; margin-right: 20px"
            v-model="queryParams.phone"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="userName">
          <el-input
            style="width: 240px; margin-right: 20px"
            v-model="queryParams.userName"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
       
        <el-form-item label="查询时间" prop="dateRange">
          <el-select
           v-model="queryParams.queryTimeType"
           clearable
           filterable
           placeholder="请选择"
           style="width: 120px"
          >
           <el-option
             v-for="(item, index) in queryTimeStyleOption"
             :key="index"
             :label="item.label"
             :value="item.value"
           ></el-option>
          </el-select>
          <el-date-picker
            :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
            clearable
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            plain
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            type="success"
            size="mini"
            v-hasPermi="['business:customerDetails:export']"
            @click="handleExportOut"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="table-box">
      <el-row :gutter="10" class="mb8">
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="handleQuery"
          :columns="columnsList"
        ></right-toolbar>
      </el-row>
      <el-table
        v-sticky-header
        ref="table"
        v-loading="loading"
        :data="dataList"
      >
        <template v-for="(item,index) in columns.slice(0, columns.length - 1)">
          <el-table-column
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"
            :width="getColumnWidth(index)"
            align="center"
            :fixed="item.fixed"
            :sortable="item.sortable ? item.sortable : false"
            :show-overflow-tooltip="item.showTooltip"
            v-if="item.visible"
          >
          <template slot-scope="scope">
             <!-- 系统状态单独处理显示 -->
             <div v-if="item.prop == 'sysStatus'"> 
                {{ ArrayFormatObj(sysStatusOption)[scope.row[item.prop]]}}
             </div>
             <span v-else>
                {{ scope.row[item.prop] }}
             </span>
          </template>
          </el-table-column>
        </template>
        <el-table-column
          fixed="right"
          :prop="columns[columns.length - 1].prop"
          :label="columns[columns.length - 1].label"
          align="center"
          :width="getColumnWidth(columns.length - 1)"
          v-if="columns[columns.length - 1].visible"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-hasPermi="['business:customerDetails:info']"
              @click="handelDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 使用分页插件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page-sizes="[10, 50, 100, 200, 500]"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import tableStickyMixins from "@/mixins/tableStickyMixins";
import { mapGetters } from "vuex";
import {getAreaCodeList} from '@/api/system/areaCode'
import {getDownProductList} from "@/api/business/productManagement";
import {queryPickCustomerByPage} from "@/api/customer/customerPick";
import{
    getFeeType,
    getPickType,
} from "@/api/business/upPickManagement"
import{queryProductList} from "@/api/business/upPickManagement"

import moment from "moment";

export default {
  // 定义名字用于标识该组件是否被keep-alive缓存
  name: "CustomerPick",
  data() {
    return {
      // 表格数据列表
      dataList: [],
      // 下游产品筛选项
      productOptionList: [],
      // 上游渠道筛选项
      upProductIdsOptionList: [],
       // 城市列表筛选项
       cityCodeOption:[],
      // 省份列表筛选项
      provinceCodeOption:[],
      // 计费模式筛选项
      feeTypeOption:[],
      // 采量模式筛选项
      pickTypeOption:[],
      // 是否计费筛选项
      isFeeOption:[
        { label: "不计费",value: 0, },
        { label: "计费",value: 1, },
      ],
      // 售出状态筛选项
      pushStatusOption:[
        { label: "待授权",value: 0, },
        { label: "售出中",value: 1, },
        { label: "已售出",value: 2, },
        { label: "售出失败",value: 3, },
        { label: "流失",value: 4, },
      ],
      // 时间筛选条件筛选项
      queryTimeStyleOption:[
        { label: "点击时间",value: 1, },
        { label: "注册时间",value: 2, },
        { label: "表单生成时间",value: 3, },
      ],
      // 数据系统状态筛选项
      sysStatusOption:[
        { label: "新增",value: 0, },
        { label: "已读",value: 1, },
      ],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        // 时间筛选条件 (点击时间（默认))
        queryTimeType:1
      },
      // 时间范围
      dateRange: [],
      loading: false,
      // 显示搜索栏
      showSearch: true,
      // 表格列信息（用于控制显示与隐藏)
      columnsList:[]

     
    };
  },
  mixins: [tableStickyMixins],
  watch: {
    columns: {
      handler() {
        this.updateTableHeight();
      },
      deep: true,
    },
  },
  created() {
    this.init();
    this.getCityOrProvinceCodeList()
    this.getProductList();
    this.getChannelList()
    this.getRelatedType()
  },
  computed: {
    ...mapGetters(["sidebar", "device"]),
    // 计算当前列元素在所处环境的宽度
    getColumnWidth() {
      return (index) => {
        return this.isMobile
          ? this.columns[index].mobileWidth
          : this?.sidebar?.opened
          ? this.columns[index].pcWidth - this.slightWidth
          : this.columns[index].pcWidth + 17;
      };
    },
     // 将数组转换为对象形式
     ArrayFormatObj:()=>{
        return (arr)=>{
          return arr.reduce((pre, cur)=>{
            pre[cur.value] = cur.label;
            return pre;
          },{})
        }
     },
     // 表格列信息的计算属性
     columns(){
        const arr = [
          {label: `采量公司`,prop: "companyName",visible: true,pcWidth: 160,mobileWidth: 100,fixed: 'left',showTooltip: true,},
          {label: `产品名称`,prop: "productName",visible: true,pcWidth: 200,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
          {label: `产品简称`,prop: "simpleName",visible: true,pcWidth: 200,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
          {label: `分发产品`,prop: "channelName",visible: true,pcWidth: 120,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
          {label: `姓名`,prop: "userName",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `贷款金额`,prop: "loanMoney",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          {label: `系统状态`,prop: "sysStatus",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `售出状态`,prop: "pushStatusStr",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `报价金额`,prop: "productMoney",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          {label: `信贷收益`,prop: "sellMoney",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          {label: `网贷收益`,prop: "advertMoney",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          {label: `采量成本`,prop: "feeMoney",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          {label: `收益`,prop: "sysRevenueMoney",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          {label: `手机号MD5`,prop: "phoneMd5",visible: true,pcWidth: 270,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `省评分`,prop: "provinceScore",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          {label: `城市评分`,prop: "cityScore",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          {label: `总评分`,prop: "allScore",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          {label: `省份`,prop: "provinceName",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `城市`,prop: "cityName",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `是否计费`,prop: "isFeeStr",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `采量模式`,prop: "pickTypeStr",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `计费模式`,prop: "feeTypeStr",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `管理员`,prop: "upManageUserName",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},

          {label: `准入时间`,prop: "checkTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `跳入时间`,prop: "inTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `注册时间`,prop: "enrollTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `表单时间`,prop: "submitTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `操作`,prop: "operation",visible: true,pcWidth: 120,mobileWidth: 50,fixed: "right",showTooltip: true},
        ]
        this.$set(this,'columnsList',arr)
        return arr;
     }
    
  },
  methods: {
    // 获取相关模式
    getRelatedType() {
          getFeeType().then((res) => {
            this.feeTypeOption = res?.data;
          });
          getPickType().then((res) => {
            this.pickTypeOption = res?.data;
          });
       },
    // 获取全国城市、省份列表
    getCityOrProvinceCodeList(){
      getAreaCodeList(2).then(res=>{
        this.cityCodeOption = res.data
      })
      getAreaCodeList(1).then(res=>{
        this.provinceCodeOption = res.data
      })
    },
    // 获取产品列表
    getProductList(){
      getDownProductList().then(res=>{
        this.productOptionList = res.data
      })
    },
    // 获取渠道列表
    getChannelList(){
      queryProductList().then(res=>{
        this.upProductIdsOptionList = res.data
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$set(this.queryParams, "pageIndex", 1);
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 完全重置到初始状态
      this.$set(this, "queryParams", {
        pageIndex: 1,
        pageSize: 10,
        // 时间筛选条件 (添加时间（默认))
        queryTimeType:1
      });
      this.init();
    },
    init() {
      this.dateRange = [
        moment().format("YYYY-MM-DD 00:00:00"),
        moment().format("YYYY-MM-DD 23:59:59"),
      ];
      this.getList();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      if (this.dateRange?.length) {
        this.queryParams.startTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      } else {
        delete this.queryParams.startTime;
        delete this.queryParams.endTime;
      }
      console.log('参数', this.queryParams);
      queryPickCustomerByPage(this.queryParams).then((response) => {
        // 解决id为number类型精度丢失问题
        this.dataList = response?.data?.list.map((row) => {
          return {
            ...row,
            id: row.id.toString(),
          };
        });
        this.total = response?.data?.total;
        this.loading = false;
      }).catch((err) => {
          setTimeout(() => {// 延迟2s后自动取消加载状态
            this.loading = false;
          }, 2000);
      })
    },
    // 修改表格高度触发回调
    updateTableHeight() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
    // 点击详情按钮的回调
    handelDetail(row){
      console.log(row);
      this.$router.push({
        path:'/customer/customerPick/detail',
        query:{
          id:row?.id,
        }
      })
    },
    /*导出*/
    handleExportOut(){ 
      if (this.dateRange?.length) {
        this.queryParams.startTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      } else {
        delete this.queryParams.startTime;
        delete this.queryParams.endTime;
      }
      this.download('/customer/pick/v1.0.0/export',this.queryParams,`采量客户信息表_${new Date().getTime()}.xlsx`)
    },
    
    
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 20px;
  color: #333333;
  font-weight: 500;
}
.search-box {
  margin: 0 0 20px;
  padding: 20px 20px 0;
  background: #fff;
  align-items: flex-start;
  border-radius: 6px;
}
.search-area {
  position: absolute;
  right: 20px;
}
.el-form-item__content {
  flex: 1;
  line-height: 40px;
  position: relative;
  font-size: 14px;
  min-width: 0;
}
::v-deep .el-dialog__body {
  border-top: 1px solid #dfe6ec;
  border-bottom: 1px solid #dfe6ec;
}
.el-table {
  // 滚动条加粗
  --scrollbar-height: 9px;
}
</style>
